<template>
  <div id="app">
    <div class="form">
      <my-form :form="form">
        <template v-slot:address="formData">
          <el-button @click="aaa(formData)">哈哈哈</el-button>
        </template>
      </my-form>
    
    </div>
  </div>
</template>

<script>
  export default {
    name: 'app',
    components: {
      MyForm: () => import('./components/MyForm'),
    },
    data() {
      const checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        if (value < 18) {
          callback(new Error('必须年满18岁'));
        } else {
          callback();
        }
      };
      
      return {
        form: {
          form_items: [
            {
              type: 'input',
              label: '配置表名称',
              placeholder: '请输入配置表名称',
              prop: 'config_name',
              clearable: true,
              size: 'mini',
              sufIcon: 'el-icon-edit',
              preIcon: 'el-icon-search',
            },
            {
              type: 'input-number',
              label: '价格',
              prop: 'price',
              size: 'mini',
              placeholder: '请输入价格',
              precision: 2,
              strictly: true,
              step: 10,
              min: 10,
              max: 500,
              class: 'w-100',
              disabled: true
            },
            {
              type: 'input',
              input_type: 'textarea',
              maxlength: 50,
              label: '配置表描述',
              placeholder: '请输入配置表描述',
              prop: 'config_describe',
              clearable: true,
              show_word_limit: true,
              disabled: true
            },
            {
              type: 'radio',
              prop: 'type',
              label: '类型',
              radios: [
                {
                  label: '普货',
                  value: 1,
                  disabled: true
                },
                {
                  label: '带电',
                  value: 2
                }
              ]
            },
            {
              type: 'select',
              label: '店铺',
              placeholder: '请选择店铺',
              prop: 'shop',
              option_value: 'id',
              option_label: 'name',
              options: [
                {
                  id: 1,
                  name: '黄金糕'
                }, {
                  id: 2,
                  name: '双皮奶'
                }, {
                  id: 3,
                  name: '蚵仔煎'
                }, {
                  id: 4,
                  name: '龙须面'
                }, {
                  id: 5,
                  name: '北京烤鸭'
                }],
              clearable: true,
              class: 'w-100',
              filterable: true
            },
            {
              type: 'cascader',
              label: '类目',
              placeholder: '请选择类目',
              prop: 'categories',
              props: {
                value: 'id',
                label: 'name'
              },
              options: [{
                id: 'zhinan',
                name: '指南',
                children: [{
                  id: 'shejiyuanze',
                  name: '设计原则'
                }]
              }],
              clearable: true,
              class: 'w-100',
              filterable: true
            },
            {
              type: 'checkbox',
              label: '爱好',
              prop: 'hobbies',
              options: [
                {
                  value: 1,
                  label: '篮球',
                  disabled: true
                },
                {
                  value: 2,
                  label: '足球'
                },
                {
                  value: 3,
                  label: '乒乓球'
                },
                {
                  value: 4,
                  label: '羽毛球'
                },
              ]
            },
            {
              type: 'slot',
              slotName: 'address',
              prop: 'address'
            }
          ],
          form_data: {
            config_name: 'didididididididi',
            config_describe: '',
            type: 1,
            shop: '',
            categories: '',
            hobbies: [],
            address: '',
            price: ''
          },
          form_footer: {
            buttons: [
              {
                label: '确定',
                button_type: 'primary',
                type: 'submit',
                callback: (form_data) => {
                  console.log(form_data)
                }
              },
              {
                label: '重置',
                type: 'reset',
              },
              {
                label: '取消',
                type: 'cancel',
                callback: () => {
                  console.log('点击了取消')
                }
              }
            ]
          },
          rules: {
            config_name: [{validator: checkAge, trigger: 'blur'}],
            hobbies: [{required:true,message: '请选择店铺', trigger: 'blur'}],
          }
        }
      }
    },
    created() {
    },
    methods: {
      aaa(formData) {
        this.form.form_data.type = 2
      }
    }
  }
</script>

<style lang="scss" scoped>
  #app {
    .form {
      margin: 50px auto;
      width: 500px;
      
    }
  }
</style>
